<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>accountDetail</title>
    <!--引入bootstrap和jQuery以及该html对应的css和js文件-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="../js/accountDetail.js" ></script>
    <link href="../css/accountDetail.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding-top: 210px">
<!--导航栏-->
<form action>
    <body style="padding-top: 210px">
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="z-index: 99999">
        <div class="container" >
            <!--注册和登录按钮-->
            <ul class="nav navbar-nav navbar-right " id="logAcount" >
                <li><a href="/html/signIn.html"><span class="glyphicon glyphicon-user"></span> REGISTER</a></li>
                <li><a href="/html/login.html"><span class="glyphicon glyphicon-log-in"></span> SIGN IN</a></li>
            </ul>
            <!---->
            <!--当页面宽度变小后，导航栏收拢变成三条小杠，点击可以打开导航栏-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/html/home.html"><img src="../img/coding.png" alt="" style="width: 210px; height: 40px;margin-top: -9px"></a>
            </div>
            <!---->
            <!--导航栏上的选项-->
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li ><a href="/html/home.html">ALL JOBS</a></li>
                    <li><a href="/html/postJob.html">POST A JOB</a></li>
                    <li><a href="/html/myPost.html">MY POST</a></li>
                    <li><a href="/html/accountDetail.html">ACCOUNT</a></li>
                </ul>
            </div>
            <!---->
        </div>
    </nav>
    <!---->
    <nav class="navbar  navbar-fixed-top" role="navigation" style="margin-top: 20px!important;">
        <div class="container" style="width: 100%;height: 50px"></div>
        <div  style="width: 100%;height: 160px;background-color: #209b60;margin-top: -20px ;padding: 40px">
            <div class="container">
                <div class="col-sm-6" >
                    <h1 style="color: white">ACCOUNT</h1>
                </div>

                <div class="col-sm-6 text-right"  >
                    <ol class="breadcrumb" >
                        <li>
                            <a href="/html/home.html" >Home</a>
                        </li>
                        <li style="color: white">account detail</li>
                    </ol>
                </div>
            </div>
        </div>
    </nav>
    <!--提示的区域-->
    <p id="test" type="text" style="text-align: center;width:100%; position: absolute ;"></p>

    <div class="container" id="accountMaster">
        <div class="row">
            <div class="col-sm-6" >
                <!--Email输入框-->
                <div class="input-group input-login detailE" style="margin: 100px auto 0 auto">
                    <input disabled="disabled" style="background-color: transparent" type="text" class="form-control input-login" id="detailEmail" placeholder="Email" >
                    <span class="input-group-addon input-group-addon-icon" >
                <span class="glyphicon glyphicon-user glyphicon-icon" ></span></span>
                </div>
                <!---->
            </div>
            <div class="col-sm-6" >
                <!--password输入框-->
                <div class="input-group input-login detailE" style="margin: 100px auto 0 auto">
                    <input type="password" class="form-control input-login " id="detailPassword" onkeyup="checkpass(this.id)" placeholder="Password">
                    <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-lock glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6" >
                <!--公司名称输入框-->
                <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                    <input type="text" class="form-control input-login " id="detailCompanyName"  name="detailCompanyName" placeholder="CompanyName">
                    <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon glyphicon-dashboard glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
            <div class="col-sm-6" >
                <!--Password confirmation输入框-->
                <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                    <input type="password" class="form-control input-login " id="detailConfirmPassword" onkeyup="checksecpass(this.id)" name="detailConfirmPassword" placeholder="ConfirmPassword">
                    <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-lock glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6" >
                <!--公司所属行业输入框-->
                <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                    <input type="text" class="form-control input-login " id="detailCompanyProfession" name="detailCompanyProfession" placeholder="CompanyProfession">
                    <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-globe glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
            <div class="col-sm-6" >
                <!--Current password输入框-->
                <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                    <input type="password" class="form-control input-login " id="detailCurrentPassword" placeholder="CurrentPassword">
                    <span class="input-group-addon input-group-addon-icon">
                <span class="glyphicon glyphicon-lock glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6" >
                <!--公司地址输入框-->
                <div class="input-group input-login detailE" style="margin: 50px auto 0 auto">
                    <input type="text" class="form-control input-login " id="detailCompanyAddress" name="detailCompanyAddress" placeholder="CompanyAddress">
                    <span class="input-group-addon input-group-addon-icon ">
                <span class="glyphicon glyphicon glyphicon-record glyphicon-icon"></span></span>
                </div>
                <!---->
            </div>
            <div class="col-sm-6" >
            </div>
        </div>


        <div class="bs-example"  id="butt" style="width: 500px; margin: 50px auto 0 auto">
            <button type="button" class="btn btn-primary" style="width: 500px;height: 50px" id="modify">MAKE A CHANGE</button>

        </div>


        <!--<div class="bs-example" id="butt">-->

            <!--<div class="row">-->
                <!--<div class="col-sm-6" >-->
                    <!--<button type="button" class="btn btn-primary" style="width: 500px;height: 50px" id="modify">更改</button>-->
                <!--</div>-->
                <!--<div class="col-sm-6">-->
                    <!--<button type="button" class="btn btn-primary" id="logOut">注销</button>-->
                <!--</div>-->
            <!--</div>-->


            <!--<br>-->
        <!--</div>-->


    </div>
    <!--页脚-->
    <div id="footer">
        <div class="row">
            <div class="col-xs-6 col-sm-3 col" id="col1">
                <div id="rc1">
                    <h1 class="h">COURSES</h1>
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col" id="col2">
                <div id="rc2">
                    <h1 class="h">QUICK LINKS</h1>
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Web Development</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Ruby Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Node Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Mobile Path</a></p>
                    <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                    <p class="p1"><span class="glyphicon glyphicon-play"></span>
                        <a href="http://www.codingirls.club/how_club_works#" class="a1">Career Development</a></p>

                </div>
            </div>
            <!-- Optional: clear the XS cols if their content doesn't match in height -->
            <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-3 col" id="col3">
                <h1>RECENT POST</h1>
                <p><img src="../img/footer.png" height="30" width="70"/>
                    <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
                <p>2 days ago</p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p><img src="../img/footer.png" height="30" width="70"/>
                    <a href="http://www.codingirls.club/how_club_works#"  class="a1">Post title goes here</a></p>
                <p>2 days ago</p>
                <hr  style="height:1px;border:none;border-top:1px dashed #999999;" />
                <p><img src="../img/footer.png" height="30" width="70"/>
                    <a href="http://www.codingirls.club/how_club_works#" class="a1">Post title goes here</a></p>
                <p>2 days ago</p>
            </div>
            <div class="col-xs-6 col-sm-3 col" id="col4">
                <h1>CONTACT US</h1>
                <p class="fa fa-wechat"></p>
                <p><span class="a2">微信客服：</span> <span class="a3">codingirls</span></p>
                <p class="a1">Monday - Friday - 9:Am to 5 Pm</p>
                <p class="a1">Questions: info@codingirls.club</p>
                <a href=""></a>
            </div>
        </div>
    </div>
    <div id="info">
        <div id="info1">© Coding Girls Club Copyright 2016 - 2017. All Right Reserved.</div>
    </div>
    <!---->

</form>
<script type="text/javascript">
    var t1;
    function checkmail(x)
    {
        $('#check1').remove();
        var y=document.getElementById(x).value
        if(!/[@]{1}/.test(y)){
            $('#test').empty()
            let str = "<div class='alert alert-danger alert-dismissible' role='alert' style='font-size: 20px'>"+
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                "<span aria-hidden='true'>&times;</span>"+"</button>"+" WARNING&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please enter the correct mailbox </div>";
            $('#test').append(str);
        }else {
            $('#test').empty()
        }

    }
    function checkpass(x)
    {
        $('#check2').remove();
        t1=document.getElementById(x).value;
        if(x.length<8||x.length>20||! /^[0-9a-zA-Z!@#$%^&*]{8,20}$/.test(t1)){
            $('#test').empty();
            let str = "<div class='alert alert-info alert-dismissible' role='alert' style='font-size: 20px'>"+
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                "<span aria-hidden='true'>&times;</span>"+"</button>"+" ATTENTION&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contains only letters, numbers, and must be between 8-20 digits</div>";
            $('#test').append(str);
        }else {
            $('#test').empty()
        }
    }
    function checksecpass(x){
        $('#check3').remove();
        var y=document.getElementById(x).value;
        if(t1!=y){
            $('#test').empty();
            let str = "<div class='alert alert-danger alert-dismissible' role='alert' style='font-size: 20px'>"+
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>"+
                "<span aria-hidden='true'>&times;</span>"+"</button>"+" WARNING&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The password entered for the two time must be consistent</div>";
            $('#test').append(str);
        }else {
            $('#test').empty();
        }
    }

</script>
</body>
</html>